"use client"

import { ChevronDown, ChevronUp, User2 } from "lucide-react"

import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
} from "~/registry/miami/ui/dropdown-menu"
import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
   SidebarInset,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarProvider,
   SidebarTrigger,
} from "~/registry/miami/ui/sidebar"

export default function AppSidebar() {
   return (
      <SidebarProvider>
         <Sidebar>
            <SidebarHeader />
            <SidebarContent />
            <SidebarFooter>
               <SidebarMenu>
                  <SidebarMenuItem>
                     <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                           <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                              Username
                              <ChevronUp className="ml-auto" />
                           </SidebarMenuButton>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent
                           side="top"
                           className="w-[--radix-popper-anchor-width]"
                        >
                           <DropdownMenuItem>
                              <span>Account</span>
                           </DropdownMenuItem>
                           <DropdownMenuItem>
                              <span>Billing</span>
                           </DropdownMenuItem>
                           <DropdownMenuItem>
                              <span>Sign out</span>
                           </DropdownMenuItem>
                        </DropdownMenuContent>
                     </DropdownMenu>
                  </SidebarMenuItem>
               </SidebarMenu>
            </SidebarFooter>
         </Sidebar>
         <SidebarInset>
            <header className="flex items-center justify-between px-4 h-12">
               <SidebarTrigger />
            </header>
         </SidebarInset>
      </SidebarProvider>
   )
}
